import React from 'react';
import { Table, Pagination } from 'antd';
import { MessageFilled } from '@ant-design/icons';
import { WeeklyReportItem } from '../types';
import { TABLE_COLUMNS, DEFAULT_PAGINATION } from '../constants';
import style from './index.less';

interface DataTableProps {
  loading: boolean;
  dataSource: WeeklyReportItem[];
  total: number;
  pagination: {
    current: number;
    pageSize: number;
  };
  onChange: (page: number, pageSize: number) => void;
}

const DataTable: React.FC<DataTableProps> = ({
  loading,
  dataSource,
  total,
  pagination,
  onChange
}) => {
  const handleChange = (page: number, pageSize: number) => {
    onChange(page, pageSize);
  };
  
  return (
    <div className={style['pg2-table-wrapper']}>
      <div className={style['data-table-wrapper']}>
        <Table
          className={style['pg2-table']}
          columns={TABLE_COLUMNS}
          dataSource={dataSource}
          rowKey="projectId"
          loading={loading}
          pagination={false}
          scroll={{ x: 1500 }}
          locale={{ 
            emptyText: (
              <div className={style['data-table-empty']}>
                暂无数据
              </div>
            )
          }}
        />
      </div>
      
      <div className={style['pg2-pagination']}>
        <Pagination
          {...DEFAULT_PAGINATION}
          total={total}
          current={pagination.current}
          pageSize={pagination.pageSize}
          onChange={handleChange}
        />
      </div>
      
      {/* 客服浮窗按钮 */}
      <button className={style['pg2-service-button']}>
        <MessageFilled />
      </button>
    </div>
  );
};

export default DataTable; 